<template>
  <div class="nav_main">
    <div>
      <el-radio-group v-model="isCollapse" class="radio_button_area">
        <el-radio-button :value="false" v-if="isCollapse">展开</el-radio-button>
        <el-radio-button :value="true" v-if="!isCollapse">收缩</el-radio-button>
      </el-radio-group>
      <!-- 自动按角色加载菜单导航 -->
      <el-menu
        :default-active="activeIndex"
        :default-openeds="openedIndex"
        :collapse="isCollapse"
        router
      >
        <!-- 训练遍历数据，根据leaf属性的值加载多级菜单还是单级菜单 -->
        <template v-for="(item, i) in routesData" :key="i">
          <!-- 通过leaf属性选择不同的菜单格式 -->
          <el-sub-menu
            v-if="!item.leaf && item.menuShow && checkRole(item.meta.roles)"
            :key="item.id"
            :index="item.path"
          >
            <!-- 分组菜单标题 -->
            <template #title>
              <!-- 样式根据路由表中的属性值icoClass自定义 -->
              <i :class="'icon-headerapp ' + item.icoClass" :title="item.meta.title"></i>
              <span>{{ item.name }}</span>
            </template>
            <el-menu-item-group>
              <template v-for="trem in item.children">
                <el-menu-item
                  v-if="trem.menuShow && checkRole(item.meta.roles)"
                  :key="trem.id"
                  :index="trem.path"
                  :title="trem.meta.title"
                >
                  <i :class="'icon-headerapp-sub ' + trem.icoClass" ></i>
                  <span>
                    {{ trem.name }}
                  </span>
                </el-menu-item>
              </template>
            </el-menu-item-group>
          </el-sub-menu>
          <el-menu-item
            v-else-if="item.leaf && item.menuShow && checkRole(item.meta.roles)"
            :key="item.id"
            :index="item.path"
          >
            <i :class="'icon-headerapp ' + item.icoClass" :title="item.meta.title"></i>
            <span>{{ item.name }}</span>
          </el-menu-item>
        </template>
        <!-- 注意这里遍历要加上key标识唯一，官方文档这里没有写全 -->
      </el-menu>
    </div>
  </div>
</template>

<script setup>
import { HomeFilled } from "@element-plus/icons-vue";
import { ref, onMounted, computed } from "vue";
import { useStore } from 'vuex';

const activeIndex = ref('/'); //默认打开的页面选项
let openedIndex = ref([]); // 初始化为空数组
const store = useStore();

const routesData = computed(() => {
  return JSON.parse(localStorage.getItem("route")) || []; //注意使用前先将字符串类型转换成对象类型
});
let userRole = "admin"; //JSON.parse(localStorage.getItem("User")).user_role?JSON.parse(localStorage.getItem("User")).user_role:

const isCollapse = ref(false);

// 递归函数，用于收集所有子菜单的index
const collectAllSubmenuIndices = (items, indices = []) => {
  items.forEach(item => {
    if (!item.leaf && item.menuShow && checkRole(item.meta.roles)) {
      indices.push(item.path); // 添加子菜单的index
      // 如果有子项，继续递归收集
      if (item.children) {
        collectAllSubmenuIndices(item.children, indices);
      }
    }
  });
  return indices;
};

//默认加载 在组件挂载时，收集所有子菜单的index
onMounted(() => {
  // 确保组件挂载后设置 default-openeds
  openedIndex.value = collectAllSubmenuIndices(routesData.value);
  // openedIndex.value = ["docmanager", "project"]; // 根据您的实际 index 值更新
});



//验证权限
const checkRole = (roles) => {
  return roles.includes(userRole);
};
</script>

<style lang="scss" scoped>
.nav_main {
  max-width: 200px;

  .radio_button_area {
    display: flex;
    justify-content: flex-end;
  }

  .el-icon {
    color: var(--icon-base-color);
  }
}

a.link {
  font-size: 14px;
  color: var(--base-text);
  display: block;
  width: 100%;
  height: 30px;
}

.el-menu,
.el-menu-item,
.el-sub-menu__title {
  color: var(--base-text);
  height: var(--nav-height) !important; /* 你想要设置的高度 */
  line-height: var(
    --nav-line-height
  ) !important; /* 行高与高度相同以垂直居中文本 */
}

/* Vue3新版本使用:deep()才可以，::v-deep 弃用 */
:deep(.el-sub-menu__title) {
  height: var(--nav-height); /* 你想要设置的高度 */
  line-height: var(--nav-line-height); /* 行高与高度相同以垂直居中文本 */
}

.el-menu-item-group,
.el-menu {
  width: 100%;
  background: var(--nav-bg);
}

.el-menu-item:hover {
  background: var(--nav-hover-bg);
}

.el-menu-item.is-active {
  color: var(--base-text);
  background: var(--nav-hover-bg);
}

/*分组标签样式修改不生效 Vue3新版本使用:deep()才可以，::v-deep 弃用 */
:deep(.el-submenu .el-submenu__title:hover) {
  background: var(--nav-hover-bg);
}

:deep(.el-menu-item-group__title) {
  padding: 0;
}
</style>